<!DOCTYPE html>
<html>
<head>
  <title>Form Tests</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <link rel="apple-touch-icon-precomposed" href="../iui/iui-logo-touch-icon.png" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <link rel="stylesheet" href="../iui/iui.css" type="text/css" />
  <link rel="stylesheet" title="Default" href="../iui/t/default/default-theme.css"  type="text/css"/>

<!--
    For Debugging with Weinre.jar  
  <script src="http://localhost:9000/target/target-script-min.js#anonymous"></script>
-->
  
  <style type="text/css">
    div.spinner {
       visibility: hidden;
       background: black url(../iui/t/default/loading.gif) no-repeat center center;
       position: absolute;
       top: 0px;
       left: 0px;
       height: 100%;
       width: 100%;
       opacity: 0.5;
    }
    form.progress div.spinner {
        visibility: visible;  // need better styling here, placeholder
    }
    fieldset > div.row > span {
    	position:	absolute;
    	right:		0px;
    	padding-left:	0px;
    }
  </style>
  <script src="../iui/iui.js"></script>
  <script>
function myJSForm(form)
{
    iui.addClass(form, "progress");
    iui.showPageByHref(form.action, encodeForm(form), form.method || "GET", null, clear);
//    iui.encodeForm
//    iui.ajax
    
    function clear() {   iui.removeClass(form, "progress"); }
    return false;  // cancel the browser's submit
}
function formResultCB()
{
//     if (xyz)
//     {
//         iui.replacePage
//     }
//     else
//     {
//         iui.replacePage
//     }
}
  </script>
</head>

<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
        <a class="button" href="#dialogForm">Dialog</a>
    </div>
    
    <ul id="formTest" title="Form Tests" selected="true">
      <li><a href="#def">default method</a></li>
      <li><a href="#GET">GET</a></li>
      <li><a href="#POST">POST</a></li>
      <li><a href="#get">get</a></li>
      <li><a href="#post">post</a></li>
      <li><a href="#targ-self">POST to target="_self"</a></li>
      <li><a href="#arrays">POST w/arrays</a></li>
      <li><a href="#submits">POST w/Submit Buttons</a></li>
      <li><a href="#delay">default w/delay</a></li>
      <li><a href="#dialogFormSelf">dialog w/target="self"</a></li>
      <li><a href="#dialogFormSubmit">dialog w/submit button</a></li>
      <li><a href="#dialogFormSubmitSelf">dialog w/submit _self</a></li>
      <!--
      <li><a href="#pop">default w/navstack pop</a></li>
      -->
    </ul>
    
    <form id="def" title="default" class="panel" action="form-echo.gtpl">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
        </fieldset>
        <a class="whiteButton" type="submit">Submit (a)</a>
        <input class="whiteButton" type="submit" name="submitInput" value="Submit" />
        <div class="spinner"></div>
    </form>


    <form id="GET" title="GET" class="panel" action="form-echo.gtpl" method="GET">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
        </fieldset>
        <a class="whiteButton" type="submit">Submit (a)</a>
        <input class="whiteButton" type="submit" name="submitInput" value="Submit" />
        <div class="spinner"></div>
    </form>

    <form id="POST" title="POST" class="panel" action="form-echo.gtpl" method="POST">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
        </fieldset>
        <a class="whiteButton" type="submit">Submit (a)</a>
        <input class="whiteButton" type="submit" name="submitInput" value="Submit" />
        <div class="spinner"></div>
    </form>

    <form id="get" title="get" class="panel" action="form-echo.gtpl" method="get">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
        </fieldset>
        <a class="whiteButton" type="submit">Submit (a)</a>
        <input class="whiteButton" type="submit" name="submitInput" value="Submit" />
        <div class="spinner"></div>
    </form>

    <form id="post" title="post" class="panel" action="form-echo.gtpl" method="post">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
        </fieldset>
        <div class="spinner"></div>
        <a class="whiteButton" type="submit">Submit (a)</a>
        <input class="whiteButton" type="submit" name="submitInput" value="Submit" />
    </form>

    <form id="targ-self" title="Target Self" class="panel" onsubmit="return confirm('Are you sure?');" target="_self" action="form-echo.gtpl" method="POST">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
        </fieldset>
        <a class="whiteButton" type="submit">Submit (a)</a>
        <input class="whiteButton" type="submit" name="submitInput" value="Submit" />
        <div class="spinner"></div>
    </form>

    <form id="arrays" title="post" class="panel" action="form-echo.gtpl" method="post">
        <h2>Parm1</h2>
        <fieldset>
            <div class="row">
                <label>Radio 1:</label>
                <input type="radio" name="parm1" value="radio 1"/>
            </div>
            <div class="row">
                <label>Radio 2:</label>
                <input type="radio" name="parm1" value="radio 2"/>
            </div>
        </fieldset>
        <h2>Parm2</h2>
        <fieldset>
            <div class="row">
                <label>Checkbox 1:</label>
                <input type="checkbox" name="parm2" value="checkbox 1"/>
            </div>
            <div class="row">
                <label>Checkbox 2:</label>
                <input type="checkbox" name="parm2" value="checkbox 2"/>
            </div>
        </fieldset>
        <h2>Parm3</h2>
        <fieldset>
            <div class="row">
                <label>Select:</label>
                <select name="parm3" size="1">
                    <option value="default">Default</option>
                    <option value="defaultgrad">Default w/Gradients</option>
                    <option value="defaulthd">Default w/HD Support</option>
                    <option value="ipdc">iOSDevCamp</option>
                    <option value="android">Android</option>
                    <option value="webos">WebOS</option>
                </select>
            </div>
        </fieldset>
        <div class="spinner"></div>
        <a class="whiteButton" type="submit">Submit (a)</a>
        <input class="whiteButton" type="submit" name="submitInput" value="Submit" />
    </form>

    <form id="submits" title="post" class="panel" action="form-echo.gtpl" method="post">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Disabled:</label>
                <input type="text" disabled="disabled" name="disabled" value="I am disabled"/>
            </div>
        </fieldset>
        <div class="spinner"></div>
        <input class="whiteButton" type="submit" name="submitInput" value="Submit" />
        <input class="redButton" type="submit" name="submitInput" value="Expedite" />
    </form>

    <form id="delay" title="delay" class="panel" action="form-echo.gtpl">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
            <div class="row">
                <label>delay:</label>
                <input type="text" name="delay" value="2"/><span>(seconds)</span>
            </div>
        </fieldset>
        <a class="whiteButton" type="submit">Submit (a)</a>
        <input class="whiteButton" type="submit" name="submitInput" value="Submit" />
        <div class="spinner"></div>
    </form>
    
    <!-- Not ready for primetime
    <form id="pop" title="NavStack Pop" class="panel" onsubmit="return myJSForm(this)" target="_ajax" action="form-echo.gtpl" method="POST">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
        </fieldset>
        <a class="whiteButton" type="submit">Submit</a>
        <div class="spinner"></div>
    </form>
    -->

    <form id="dialogForm" title="Dialog" class="dialog" action="form-echo.gtpl" method="POST">
        <fieldset>
            <h1>Dialog Form</h1>
            <a class="button leftButton" type="cancel">Cancel</a>
            <a class="button blueButton" type="submit">Submit</a>
            
            <label>Parm1:</label>
            <input type="text" name="parm1" value="value 1"/>
            <label>Parm2:</label>
            <input type="text" name="parm2" value="value 2"/>
        </fieldset>
        <div class="spinner"></div>
    </form>

    <form id="dialogFormSelf" title="Dialog" class="dialog" target="_self" action="form-echo.gtpl" method="POST">
        <fieldset>
            <h1>Dialog Form</h1>
            <a class="button leftButton" type="cancel">Cancel</a>
            <a class="button blueButton" type="submit">Submit</a>
            
            <label>Parm1:</label>
            <input type="text" name="parm1" value="value 1"/>
            <label>Parm2:</label>
            <input type="text" name="parm2" value="value 2"/>
        </fieldset>
        <div class="spinner"></div>
    </form>

    <form id="dialogFormSubmit" title="Dialog" class="dialog" action="form-echo.gtpl" method="POST">
        <fieldset>
            <h1>Dialog Form</h1>
            <a class="button leftButton" type="cancel">Cancel</a>
            <input class="button blueButton" type="submit" name="submitInput" value="Submit" />
            
            <label>Parm1:</label>
            <input type="text" name="parm1" value="value 1"/>
            <label>Parm2:</label>
            <input type="text" name="parm2" value="value 2"/>
        </fieldset>
        <div class="spinner"></div>
    </form>

    <form id="dialogFormSubmitSelf" title="Dialog" class="dialog" target="_self" action="form-echo.gtpl" method="POST">
        <fieldset>
            <h1>Dialog Form</h1>
            <a class="button leftButton" type="cancel">Cancel</a>
            <input class="button blueButton" type="submit" name="submitInput" value="Submit" />
            
            <label>Parm1:</label>
            <input type="text" name="parm1" value="value 1"/>
            <label>Parm2:</label>
            <input type="text" name="parm2" value="value 2"/>
        </fieldset>
        <div class="spinner"></div>
    </form>


</body>

</html>
